<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
          <template #form-numberInput="{ model, field }">
            <a-input placeholder="最小数字输入框2" type="ge" v-model:value="min" style="width: calc(50% - 15px)" @change="numberInputChange(model, field)"></a-input>
            <span>~</span>
            <a-input placeholder="最大数字输入框2" type="le" v-model:value="max" style="width: calc(50% - 15px)" @change="numberInputChange(model, field)"></a-input>
          </template>
      <!--table标题插槽-->
      <template #tableTitle>
        <a-button type="primary" v-auth="['demo:demo:add']" :preIcon="IconEnum.ADD" @click="handleAdd">{{ t('action.create') }}</a-button>
        <a-button type="primary" v-auth="['demo:demo:import']" :preIcon="IconEnum.IMPORT" @click="handleImport">{{ t('action.import') }}</a-button>
        <a-button type="primary" v-auth="['demo:demo:export']" :preIcon="IconEnum.EXPORT" @click="onExportXls">{{ t('action.export') }}</a-button>
        <a-button preIcon="ant-design:plus-outlined" type="primary" @click="openTab">打开Tab页</a-button>
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <template #overlay>
            <a-menu>
              <a-menu-item key="1" @click="handleBatchDelete">
                <Icon :icon="IconEnum.DELETE"></Icon>
                {{ t('action.delete') }}
              </a-menu-item>
            </a-menu>
          </template>
          <a-button
          >{{ t('action.batchOpt') }}
            <Icon icon="ant-design:down-outlined"></Icon>
          </a-button>
        </a-dropdown>
      </template>
      <!--操作栏插槽-->
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
    <!--字段回显插槽-->
    <template v-slot:bodyCell="{ column,text }">
        <!--超链接处理,先写个demo,后面可能用到.参考网址:https://blog.csdn.net/u014458962/article/details/106758063-->
        <template v-if="column.dataIndex === 'textInput'">
            <a href="http://www.baidu.com" target="_blank">{{ text }}</a>
        </template>
        <!--多标签处理,先写个demo,后面可能用的到.参考网址:https://blog.csdn.net/u014458962/article/details/106758063-->
        <template v-if="column.dataIndex === 'selectMulti'">
            <a-tag v-for="tag in tags" :key="tag" :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'">
                {{ tag.toUpperCase() }}
            </a-tag>
        </template>
        <template v-if="column.dataIndex==='filePath'">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button v-else :ghost="true" type="primary" preIcon="ant-design:download-outlined" size="small" @click="downloadFile(text)">{{ t('action.download') }}</a-button>
        </template>
        <template v-if="column.dataIndex==='pca1'">
            {{ getAreaTextByCode(text) }}
        </template>
        <template v-if="column.dataIndex==='pca2'">
            {{ getAreaTextByCode(text) }}
        </template>
    </template>
    </BasicTable>
    <DemoModal @register="registerModal" @success="reload" />
    <JImportModal @register="registerModalJimport" :url="getImportUrl" online />
  </div>
</template>
<script lang="ts" name="demo-demo" setup>
  import { ref, unref } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n'
  import { IconEnum } from '/@/enums/appEnum'
  import { BasicTable, TableAction } from '/@/components/Table';
  import { useModal } from '/@/components/Modal';
  import { getPage, deleteById, batchDelete,  getExportUrl, getImportUrl } from './demo.api';
  import { columns, searchFormSchema } from './demo.data';
  import DemoModal from './DemoModal.vue';
  import JImportModal from '/@/components/Form/src/jeecg/components/JImportModal.vue';
  import { useListPage } from '/@/hooks/system/useListPage';
  import { getAreaTextByCode } from '/@/components/Form/src/utils/Area';
  import { useGo } from '/@/hooks/web/usePage';
  const [registerModal, { openModal }] = useModal();
  const [registerModalJimport, { openModal: openModalJimport }] = useModal();
  const { t } = useI18n();
  const go = useGo();
  // 列表页面公共参数、方法
  const {  onExportXls, onImportXls, tableContext } = useListPage({
    designScope: 'demo-template',
    tableProps: {
      title: '单表demo列表',
      api: getPage,
      columns: columns,
      useSearchForm: true,
      size:'small',//紧凑型表格
      formConfig: {
        labelWidth:60,
        autoSubmitOnEnter: true,
        schemas: searchFormSchema,
        fieldMapToNumber: [
              ['numberInput', ['numberInputBegin', 'numberInputEnd']],
        ],
        fieldMapToTime: [
              ['dateYmd', ['dateYmdBegin', 'dateYmdEnd'], 'YYYY-MM-DD'],
              ['dateYmdhms', ['dateYmdhmsBegin', 'dateYmdhmsEnd'], 'YYYY-MM-DD'],
              ['dateHms', ['dateHmsBegin', 'dateHmsEnd'], 'YYYY-MM-DD'],
        ],
      },
      actionColumn: {
        width: 180,
      },
      showIndexColumn: true,
    },
    exportConfig: {
      name: '单表demo列表',
      url: getExportUrl,
    },
    importConfig: {
      url: getImportUrl,
    },
  });

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext;

  /**
   * 操作列定义
   * @param record
   */
  function getActions(record) {
    return [
      {
        label: t('action.edit'),
        auth:'demo:demo:edit',
        onClick: handleEdit.bind(null, record),
      },
      {
        label: t('action.delete'),
        auth:'demo:demo:delete',
        popConfirm: {
          title: t('common.delMessage'),
          placement: 'left',
          confirm: handleDelete.bind(null, record),
        },
      },
    ];
  }
  /**
   * 打开导入弹框
   */
  function handleImport() {
    openModalJimport(true);
  }
  /**
   * 打开tab页面
   */
  function openTab() {
    go(`/comp/jeecg/basic`);
  }

  /**
   * 新增事件
   */
  function handleAdd() {
    openModal(true, {
      isUpdate: false,
    });
  }

  /**
   * 编辑事件
   */
  function handleEdit(record) {
    openModal(true, {
      record,
      isUpdate: true,
    });
  }

  /**
   * 删除事件
   */
  async function handleDelete(record) {
    await deleteById({ id: record.id }, reload);
  }

  /**
   * 批量删除事件
   */
  async function handleBatchDelete() {
    await batchDelete({ ids: selectedRowKeys.value }, reload);
  }


    /**
     * 年龄修改事件
     */
    function numberInputChange(model, field) {
      model[field] = [unref(min), unref(max)];
    }

</script>

